<template>
	<scroll-view scroll-y class="main-container">
		<cart-list ref="myCart" :list-data="cartList"></cart-list>

		<!-- 相关推荐 -->
		<u-divider text="相关推荐"></u-divider>
		<u-grid :border="false" col="2">
			<u-grid-item v-for="(item, index) in list" :key="item.id">
				<view class="list-item">
					<view class="image-container" @click="toGoodsDetail(item)">
						<image class="image" :src="apiImgPrefix + item.mainPic" width="100%" mode="widthFix">
					</view>
					</image>
					<view class="list-info">
						<view class="text" @click="toGoodsDetail(item.id)">
							<text class="grid-name text">{{item.name}}</text>
							<text class="grid-price text">￥{{item.price}}</text>
						</view>
						<view class="cart-icon">
							<u-icon name="shopping-cart" size="30" color="#ff5a00" @click="wannaBuyThis(item)"></u-icon>
						</view>
					</view>
				</view>
			</u-grid-item>
		</u-grid>

		<!-- 添加到购物车 -->
		<Add2Cart ref="add2cart" :is-scroll="true" :goods-data="wannaBuyGoods"></Add2Cart>
		<!-- 结算 -->
		<Settlement></Settlement>
	</scroll-view>
</template>

<script>
	import Settlement from "@/components/settlement/index"
	import {
		API
	} from '@/config/index.js'
	import {
		getGoodsList
	} from "@/utils/wx_goods"
	import cartList from '@/components/cart-list/cart-list.vue'
	import Add2Cart from "@/components/add2cart/index"
	export default {
		components: {
			cartList,
			Add2Cart,
			Settlement
		},
		data() {
			return {
				apiImgPrefix: API + '/api/',
				maskTitle: '',
				list: [],
				cartList: uni.getStorageSync('cartList') || [],
				wannaBuyGoods: {},
			}
		},
		beforeCreate() {
			uni.$off('buyThisConfirm')
			uni.$off('cartSettlement')
		},
		onLoad() {
			this.initCartPage()
			this.getGoodsListData()
			uni.$on('updateCartList', data => {
				this.cartList = data;
				uni.setStorageSync('cartList', data)
			})
		},
		beforeDestroy() {
			this.$off('updateCartList')
			this.$off('refreshSomething')
		},
		onHide() {
			// 离开时更新localStorage
			uni.setStorageSync('cartList', this.cartList)
		},
		methods: {
			wannaBuyThis(item) {
				this.wannaBuyGoods = item
				this.$nextTick(() => {
					this.$refs.add2cart.popupOpen()
				})
				uni.$on('refreshSomething', () => {
					this.$refs.myCart.initListAfterAdd()
				})
			},
			toGoodsDetail(data) {
				uni.navigateTo({
					url: "/pages/goods/detail?data=" + encodeURIComponent(JSON.stringify(data))
				})
			},
			initCartPage() {
				this.$nextTick(() => {
					this.$refs.myCart.getAllMount()
				})
			},
			// 获取商品列表
			async getGoodsListData() {
				try {
					let res = await getGoodsList();
					// console.log(res)
					this.list = res.data;
				} catch (e) {
					//TODO handle the exception
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.main-container {
		padding: 3vw;
		box-sizing: border-box;
		background-color: #f7f7f7;
		height: 100vh;
	}

	.uni-checkbox-input {
		border-radius: 50% !important;
	}

	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		background: #f5f5f5;
		overflow: hidden;
	}

	.line1 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: box;
		display: -webkit-box;
		line-clamp: 1;
		box-orient: vertical;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		word-break: break-all;
		/* 英文换行问题 */
	}

	.line2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: box;
		display: -webkit-box;
		line-clamp: 2;
		box-orient: vertical;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break: break-all;
		/* 英文换行问题 */
	}

	.centerboth {
		display: flex;
		display: -webkit-flex;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
	}

	.clearfix:after {
		content: "";
		display: block;
		visibility: hidden;
		height: 0;
		clear: both;
	}

	.clearfix {
		zoom: 1;
	}

	image {
		padding: 0;
		margin: 0;
	}

	textarea {
		width: 300rpx;
		height: 75rpx;
		display: block;
		position: relative;
		font-size: 28rpx;
	}

	button::after {
		border: none;
	}

	input:-ms-input-placeholder {
		color: #808080;
	}

	cart-list {
		width: 100%;
	}

	// 相关推荐
	/deep/ .u-grid {
		margin: auto;
		overflow: hidden !important;
		padding-bottom: 100rpx;

		.u-grid-item {
			padding: 10rpx !important;

			.list-item {
				box-sizing: border-box;
				padding: 6rpx;
				width: 100%;
				border-radius: 10rpx;
				background-color: #fff;
				display: flex;
				justify-content: flex-start;
				flex-direction: column;

				.image-container {
					width: 100%;
					padding-top: 100%;
					position: relative;
					overflow: hidden;

					.image {
						width: 100%;
						height: 100%;
						position: absolute;
						left: 0;
						top: 0;
						object-fit: cover;
					}
				}

				.list-info {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					padding: 20rpx 10rpx;

					.text {
						display: block;
					}

					.grid-name {
						color: #333;
						line-height: 1.5;
						margin-bottom: 20rpx;
					}

					.grid-price {
						font-size: 36rpx;
						font-weight: bold;
						color: #ff5a00;
					}
				}


			}
		}
	}
</style>